<template>
	<div class="ml-login">
		<vue-loading type="bars" color="blue" :size="{ width: '50px', height: '50px' }"></vue-loading>    
		<div class="icon-box">
			<div class="ml-icon-login-001"></div>
			<p>盈鱼理财</p>
		</div>
		<div class="login-box">
			<div>
				<span>手机号</span><input  v-model="tel" type="tel" placeholder="请输入手机号码"/><br/>
			</div>
			<div>
				<span>密&nbsp;&nbsp;&nbsp;码</span><input v-model="code" type="password" placeholder="请输入登录密码"/>
			</div>
			
		</div>
		<div :class="{'login-btn':tel!=''&&code!='','login-btn-initial':tel==''||code==''}" v-on:click="login">登录</div>
		<div class="division">
			<p></p><span>或</span><p></p>
		</div>
		<router-link class="register-btn" tag="div" :to="{name:'register'}">新用户注册</router-link>
	</div>
</template>

<script>
import md5 from "../../config/md5.js"
import judgeSystem from "../../config/judgeSystem.js"
import vueLoading from 'vue-loading-template'
export default {
	data() {
		return {
			tel:'',
			code:''
		}
	},
	components: {
      vueLoading
    },
	created() {

	},
	mounted(){
		var h = window.innerHeight;
		this.$(".ml-login").height(h);
	},
	methods: {
		login(){
			var self=this;
			var _date=new Date().getTime();
			var sign = "_date="+_date+"&password="+self.code+"&userName="+self.tel+"&=!sign_yingyu_686";
			sign = md5.md5(sign).toLocaleLowerCase();
			var detect = judgeSystem.detect(navigator.userAgent);
			var system;
			if(detect.os.ios){
				system = 'ios';
			}else{
				system = 'android';
			}
			this.$.ajax({
				url:'/fish-backend/apis/app/login',
				type:'POST',
				beforeSend:function(xhr){		 
					xhr.setRequestHeader('softversion',detect.app.Xylc);
					xhr.setRequestHeader('appidentifier',system);
					xhr.setRequestHeader('source','web');
				 },
				 data:{	
				 	'_date':_date,	
				 	'password':self.code,
				 	'sign':sign,
				 	'userName':self.tel,
				 	
				 },
				 success:function(data){
					localStorage.setItem('login',data.data.userName);
					localStorage.setItem('sid',data.data.sid);
					self.$router.replace({ path: '/yylc-h5/user/user' })
				 }
			});
		}
	}
}	
</script>

<style lang="scss">
.ml-login{
	background:#fff;
	.vue-loading{
		position:relative;
		top:500px;
	}
	.icon-box{
		height:300px;
		padding-top:90px;
		p{
			font-family: PingFang-SC-Regular;
			font-size: 50px;
			color: #3D76FF;
			text-align: center;
			margin-top:30px;
		}
	}
	.login-box{
		div{
			width:80%;
			margin:20px auto;
			border-bottom:2px solid  #ECECEC;
			padding:20px;
			span:first-child{
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #999999;
			}
			span{
				font-family: PingFangSC-Regular;
				font-size: 36px;
				color: #fff;
				letter-spacing: 0;
				line-height: 36px;
			}
			input{
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #666666;
				letter-spacing: 4px;
				border:0;
				background: transparent;
				padding:0px 20px 5px 30px;
				width:70%;
			}
			input:focus{
				 outline: none;
			}	
			input::-webkit-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;
	        }
	        input::-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
	        input:-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
	        input:-ms-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
		}

	}
	.division{
		position:relative;
		p:first-child{
			position:absolute;
			width:30%;
			height:2px;
			left:12%;
			background:#ECECEC;
		}
		span{
			position:absolute;
			top:-10px;
			left:48%;
		}
		p:last-child{
			position:absolute;
			width:30%;
			height:2px;
			top:0;
			right:12%;
			background:#ECECEC;
		}
	}
	.login-btn{
		width:75%;
		margin:70px auto;
		height:93px;
		text-align: center;
		line-height:94px;
		background: #497FFF;
		border-radius: 100px;
		font-family: PingFang-SC-Regular;
		font-size: 38px;
		color: #FFFFFF;
	}
	.login-btn-initial{
		background: #E5E5E5;
		border-radius: 100px;
		width:75%;
		margin:70px auto;
		height:93px;
		line-height:94px;
		text-align: center;
		font-family: PingFang-SC-Regular;
		font-size: 38px;
		color: #B7B7B7;
	}
	.register-btn{
		width:75%;
		margin:120px auto;
		height:93px;
		text-align: center;
		line-height:94px;
		border-radius: 100px;	
		font-family: PingFang-SC-Regular;
		font-size: 38px;
		color: #3D76FF;
		border: 2px solid #3D76FF;
	}
}	
</style>